<!-- eslint-disable vue/html-indent -->
<template>
  <div>
    <el-form
      :model="filters"
      label-suffix="："
      :inline="true"
      class="doumee-form"
    >
      <el-form-item :label="$t('message.xzcd')" prop="siteId" label-width="auto">
        <el-select
          v-model="filters.siteId"
          style="width: 200px"
          :placeholder="$t('message.qxz') + $t('message.cd')"
          clearable
        >
          <el-option
            v-for="item in siteList"
            :key="item.zid"
            :label="item.siteName"
            :value="item.zid"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('message.xzsj')" prop="date" label-width="auto">
        <el-date-picker
          v-model="filters.date"
          style="width: 200px"
          type="date"
          :placeholder="$t('message.xzrq')"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label-width="0">
        <el-time-picker
          v-model="filters.time"
          is-range
          style="width: 250px"
          :range-separator="$t('message.zhi')"
          format="HH:mm"
          value-format="HH:mm"
          :start-placeholder="$t('message.kssj')"
          :end-placeholder="$t('message.jssj')"
          :placeholder="$t('message.xzsjfw')"
        />
      </el-form-item>
      <el-button v-preventReClick type="primary" @click="getSpList(1)">{{ $t('message.cz') }}</el-button>
      <el-button v-preventReClick @click="clearSpList">{{ $t('message.clear') }}</el-button>
    </el-form>
    <div class="spBox">
      <div
        v-for="(item, index) in spList"
        :key="index"
        class="spLi"
        @click="videoBtn(item)"
      >
        <el-image :src="item.gifName" class="spimg" />
        <div class="spbt">{{ item.goalType }}{{ item.goalSore? '｜' + item.goalSore + $t('message.fenqiu'): '' }}</div>
        <div class="sptime">{{ item.goalTime }}</div>
      </div>
    </div>
    <Paginations
      :total="totalb"
      :page="paginationb.page"
      :page-size="paginationb.rows"
      :integrated="integrated"
      hide-on-singlepage
      @current-change="getSpList"
    />
    <el-dialog
      :title="$t('message.jcsj')"
      :visible.sync="showJk"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      width="800px"
      :before-close="cancel"
    >
      <video :src="videoSrc" style="width: 100%" autoplay controls />
    </el-dialog>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import store from '@/store'
import { wonderfulMomentsList, wonderfulMomentsSiteList } from '@/api'

export default {
  data() {
    return {
      modalDialog: store.getters.dialog,
      subLoading: false,
      meta: [],
      listLoading: false,
      showJk: false,
      videoSrc: '',
      filters: {
        date: parseTime(new Date()).slice(0, 10),
        time: []
      },
      filtera: {},
      siteList: [],
      spList: [],
      rulers: {
        isCharge: [
          { required: true, trigger: 'change', message: this.$t('message.qxz') + this.$t('message.sfsf') }
        ],
        isDiscount: [
          { required: true, trigger: 'change', message: this.$t('message.qxz') + this.$t('message.hyzk') }
        ]
      },
      sfLxlist: [{
        label: this.$t('message.shoufei'),
        value: '1'
      }, {
        label: this.$t('message.mianfei'),
        value: '0'
      }],
      integrated: false,
      tatal: 0,
      paginationb: {
        page: 1,
        rows: 12
      },
      totalb: 0
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    const venueInfo = JSON.parse(sessionStorage.getItem('venueInfo'))
    const time = [venueInfo.openTimeStart, venueInfo.openTimeEnd]
    this.filters.time = time
    this.getSiteList()
  },
  methods: {
    videoBtn(e) {
      this.videoSrc = e.videoUrl
      this.showJk = true
    },
    cancel() {
      this.videoSrc = ''
      this.showJk = false
    },
    // 获取场地列表
    getSiteList() {
      wonderfulMomentsSiteList({
        param: {}
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            this.siteList = res.recordList
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 标红table指定行
    tableRowClassName({ row, rowIndex }) {
      // 判断条件（quantityStock ，warningLimit ，quantityStock 列表字段信息）
      if (row.isRed === '1') {
        // 后面的css样式
        return 'success-row'
      }
      return ''
    },
    clearSpList() {
      this.filters = {}
      this.getSpList(1)
    },
    getSpList(page) {
      const { filters, paginationb } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        paginationb.page = page
        this.paginationb.page = page
      }
      if (this.paginationb.page === 1) {
        paginationb.firstQueryTime = parseTime(new Date())
      }
      if (filters.time && filters.time.length > 0) {
        filters.beginTime = filters.time[0]
        filters.endTime = filters.time[1]
      }
      wonderfulMomentsList({ pagination: { ...paginationb }, param: { venueId, ...filters }})
        .then(res => {
          if (res.errorCode === '000000') {
            if (paginationb.page === 1 && res.totalCount === 0) {
              this.$message.info(this.$t('message.wcdjcsj'))
            }
            this.spList = res.recordList
            this.totalb = res.totalCount
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.spBox {
  width: calc(100% + 20px);
  display: flex;
  flex-wrap: wrap;
  .spLi {
    width: calc((100% - 80px) / 4);
    margin-right: 20px;
    margin-bottom: 30px;
    .spimg {
      width: 100%;
      vertical-align: top;
    }
    .spbt {
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #222222;
      margin-top: 15px;
      line-height: 1em;
    }
    .sptime {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      margin-top: 15px;
      line-height: 1em;
    }
  }
}
.fl4 {
  width: 25%;
  display: inline-block;
}
.fl2 {
  display: inline-block;
}
.el-table .success-row {
  color: red;
}
</style>
